<template>
	<div>
		<div class="login-page">
			<div class="form">
				<div class="title">尿素加注网络智能管理系统</div>
				<el-input
						placeholder="输入登录账号"
						prefix-icon="el-icon-user-solid"
						v-model.trim="username">
				</el-input>

				<el-input
						placeholder="输入登录密码"
						prefix-icon="el-icon-lock"
						v-model="password"
						show-password
						@keyup.enter.native="handleLogin">
				</el-input>

				<el-button
						class="button"
						type="primary"
						:loading="loading"
						@click.native.prevent="handleLogin">
					登录
				</el-button>
			</div>
		</div>
		<vue-particles
				color="#000000"
				:particleOpacity="0.7"
				:particlesNumber="60"
				shapeType="circle"
				:particleSize="1"
				linesColor="#EEEEEE"
				:linesWidth="1"
				:lineLinked="true"
				:lineOpacity="0.4"
				:linesDistance="150"
				:moveSpeed="2"
				:hoverEffect="true"
				hoverMode="grab"
				:clickEffect="false"
				clickMode="push"
				class="lizi"
		>
		</vue-particles>
	</div>

</template>

<script>
	import { setToken, setUserinfo,setroletype,setisMain ,getisMain,setroleAuthBtns} from '@/utils/auth'
	import {Message} from "element-ui";

	export default {
		data() {
			return {
				redirect: undefined, //上一个页面，登录成功后再一次跳到那个页面
				username: '', //用户名
				password: '', //密码
				loading: false,  //按钮loading
			}
		},
		watch: {
			$route: {
				handler(route) {
					//保存上一个页面
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},

		methods: {
			//登录
			handleLogin() {
				if(!this.username) {
					this.$message.warning('请输入登录账号！');
					return;
				}
				if(!this.password) {
					this.$message.warning('请输入登录密码！');
					return;
				}
				this.loading = true;
				//执行登录操作
				this.$http({
					method: 'post',
					url: '/api/account/login',
					data: {
                        userCode: this.username,
                        userPwd: this.password
					}
				}).then(res => {
                    setToken(res.data.token);
                    setUserinfo(JSON.stringify(res.data.userInfo));
                    this.$router.push({ path: this.redirect || '/' });
                    //动态获取路由菜单---跳转到路由菜单里面的第一个去
					// if(res.data.LoginRole === "operator"){
					//
					// }else{
					// 	Message.warning('账号密码错误！');
					// }
				}).finally(()=>{
					this.loading = false

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lizi{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		display: none;
	}
	@mixin btn{
		.el-input {
			margin-bottom: 20px;
			border-radius: 18px !important;
			border: none !important;
		}
		.button {
			margin-top: 20px;
			width: 100%;
		}
	}
	@media screen and (min-width: 1700px){
		/*大于1700生效*/
		.login-page {
			width: 100vw;
			height: 100vh;
			/*background-color: #2d3a4b;*/
			background-image: url("../../assets/image/bg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.form {
			float: right;
			width: 450px;
			max-width: 100%;
			padding: 240px 35px 0;
			margin:0 18% 0 0;
			overflow: hidden;
		}
		.title {
			font-size: 26px;
			color:#3487E8;
			margin: 60px auto 50px auto;
			font-weight: bold;
		}
		@include btn;
	}

	/*//宽度媒体查询*/
	@media screen and (max-width: 1700px){
		.login-page {
			width: 100vw;
			height: 100vh;
			background-image: url("../../assets/image/bg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.form {
			float: right;
			width: 380px;
			max-width: 100%;
			padding: 240px 35px 0;
			margin:0 18% 0 0;
			overflow: hidden;
		}
		.title {
			font-size: 22px;
			color:#3487E8;
			margin: 60px auto 50px auto;
			font-weight: bold;
		}
		@include btn;
	}
	@media screen and (max-width: 1300px){
		.login-page {
			position: fixed;
			width: 100vw;
			height: 100%;
			background-image: url("../../assets/image/bg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-attachment:fixed;
		}
		.form {
			float: right;
			width: 380px;
			max-width: 100%;
			padding: 240px 35px 0;
			margin:0 15% 0 0;
			overflow: hidden;
		}
		.title {
			font-size: 22px;
			color:#3487E8;
			margin: 60px auto 50px auto;
			font-weight: bold;
		}
		@include btn;
	}
	@media screen and (max-width: 1080px){
		.login-page {
			position: fixed;
			width: 1080px;
			height: 100%;
			overflow: hidden;
			background-image: url("../../assets/image/bg.png");
			background-repeat: no-repeat;
			background-size: 1080px 100%;
			background-attachment:fixed;
		}
		.form {
			float: right;
			width: 380px;
			max-width: 100%;
			padding: 240px 35px 0;
			margin:0 15% 0 0;
			overflow: hidden;
		}
		.title {
			font-size: 22px;
			color:#3487E8;
			margin: 60px auto 50px auto;
			font-weight: bold;
		}
		@include btn;
	}

	@media screen and (max-width: 980px){
		.lizi{
			display: block;
			z-index: 1;
			background-color: #232741;
		}
		.login-page {
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			background-image: none;
		}
		.form {
			z-index: 9999999;
			width: 380px;
			padding: 0;
			margin:0;
			margin-top: -200px;
		}
		.title {
			text-align: center;
			font-size: 22px;
			color:#3487E8;
			margin: 60px auto 50px auto;
			font-weight: bold;
		}
		@include btn;
	}

	/*高度查询*/
	@media screen and (max-height: 800px){
		.form {
			/*padding: 190px 35px 0;*/
		}
	}
	/*@media screen and (max-height: 650px){*/
	/*	.form {*/
	/*		padding: 120px 35px 0;*/
	/*	}*/
	/*}*/
</style>
